<template>
	<view>
		<view class="nav" :style="{height: navheight}">
			<view class="nav-title">
				<view class="logo">
					<image src="../../static/logo.png" mode=""></image>
				</view>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="18" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
						@confirm="confirm" />
				</view>
			</view>
		</view>
		
		  <view class="swiper">
		      <swiper indicator-dots indicator-color="#ffffff" indicator-active-color="red" autoplay="{{true}}" interval="1000" circular>
		        
		          <swiper-item class="box" v-for="sw in banner" :key="sw.id">
		            <image :src="sw.pic" alt="" />
		          </swiper-item>
		      </swiper>
		  </view>
		  
		  <view class="icon">
		    <view class="icon-lfet">
		    <image src="/static/manjuvip.jpg" mode=""/>
		    <text>漫剧分类</text>
		    </view>
		    <view class="icon-lfet">
		      <image src="/static/manjufl.jpg" mode=""/>
		    <text>漫剧分类</text></view>
		    </view>
			<view class="">
				<view>KK币专区</view>
			    <scroll-view scroll-x="true" class="scrollx">
					
					<view class="goods-card" v-for="mj in manju" :key="mj.id" @click="tomj">
					<view class="goods-mainpic">
					<image class="goods-image" :src="mj.Image"></image>
					<view class="goods-stop"><image src="/static/play.png" mode=""/></view>
					<view class="goods-tag">
					<uni-tag type="warning" size="mini" :text="mj.tag"/></view>
					</view>
					<view class="goods-name">{{mj.name}}</view>
					<view class="goods-sort">{{mj.sort}}</view>
					</view>
			    </scroll-view>
				<view>VIP专区</view>
				<scroll-view scroll-x="true" class="scrollx">
					
					<view class="goods-card" v-for="mj in manju" :key="mj.id" @click="tomj">
					<view class="goods-mainpic">
					<image class="goods-image" :src="mj.Image"></image>
					<view class="goods-stop"><image src="/static/play.png" mode=""/></view>
					<view class="goods-tag">
					<uni-tag type="warning" size="mini" text="VIP"/></view>
					</view>
					<view class="goods-name">{{mj.name}}</view>
					<view class="goods-sort">{{mj.sort}}</view>
					</view>
				</scroll-view>
			</view>
			
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				manju:[],
				navheight: 0,
			}
		},
		onLoad() {
			uni.getSystemInfo({
				success: (e) => {
					this.navheight = `${e.statusBarHeight+36}px`
				},
				fail(er) {
					console.log(er)
				}
			})
			uni.request({
				url: "http://localhost:3000/banner",
			}).then((res) => {
				this.banner = res.data
			})
			uni.request({
				url: "http://localhost:3000/manju",
			}).then((res) => {
				this.manju = res.data
				console.log(this.manju)
			})
		},
		methods: {
			tomj(){
				uni.navigateTo({
					url:"/pages/mjdetails/mjdetails"
				})
			}
		}
	}
</script>

<style>
	.nav {
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 6;
	}
	.nav-title {
		display: flex;
		margin-top: 22px;
	}

	.input-view {
		display: flex;
		flex-direction: row;
		width: 400rpx;
		background-color: #f8f8f8;
		height: 33px;
		border-radius: 15px;
		padding: 0 15px;
		flex-wrap: nowrap;
		
		line-height: 33px;
	}

	.input-uni-icon {
		line-height: 33px;
	}

	.nav-bar-input {
		height: 33px;
		line-height: 33px;
		width: 300rpx;
		border-radius: 15px;
		padding: 0 5px;
		font-size: 12px;
		background-color: #f8f8f8;
	}
	.logo{
		margin: 0 20rpx;
	}
	.logo image {
		height: 65rpx;
		width: 65rpx;
	}
	.swiper swiper {
		margin-top: 60px;
	  height: 360rpx;
	  width: 100%;
	}
	
	.swiper swiper image {
	  height: 100%;
	  width: 100%;
	  border-radius: 10rpx;
	}
	.icon{
	  margin: 20rpx 0;
	  display: flex;
	  justify-content: space-between; 
	}
	.icon-lfet{
	  padding: 0 10%;
	  width: 49%;
	  border-left: 1px solid #eee;
	  display: flex;
	}
	.icon-lfet image{
	  width: 45rpx;
	  height: 45rpx;
	}
	.goods-card {
		width: 200rpx;
	    height: 320rpx;
	    margin: 20rpx 10rpx;
	    box-sizing: border-box;
	    padding: 15rpx;
	    border: 1px solid #eee;
	    box-shadow: 5rpx 5rpx 10rpx rgba(0, 0, 0, 0.08);
	    border-radius: 10rpx;
	    background-color: rgba(0,0,0,0);
	    overflow: hidden;
		display: inline-block;
	    
	    }
	    .goods-mainpic {
	        position: relative;
	    width: 100%;
	    height: 66%;
	    }
	    
	    .goods-stop image{
	        width: 50rpx;
	        height: 50rpx;
	        position: absolute;
	        bottom: 70rpx;
	        right: 70rpx;
	    }
	    .goods-tag{
	        position: absolute;
	        top: 0;
	        right: 0;
	    }
	    .goods-image {
	    width: 100%;
	    height: 100%;
	    }
	    .goods-name {
	    
	    width: 150rpx;
	    display:-webkit-box;
	    -webkit-line-clamp:1;
	    overflow:hidden;
	    text-overflow:ellipsis;
	    -webkit-box-orient:vertical;
	    word-break:break-all;
	    margin: 10rpx 0rpx;
	    font-size: 28rpx;
	    
	    color: #000;
	    }
	    .goods-sort {
	    padding: 0px 10rpx;
	    font-size: 25rpx;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: wrap;
	    /* 将对象作为弹性伸缩盒子模型显示。 */
	    display:-webkit-box;
	    color: #777;
	    /* 从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式） */
	    -webkit-box-orient:vertical;
	    /* 这个属性不是 css 的规范属性，需要组合上面两个属性，表示显示的行
	    数。 */
	    -webkit-line-clamp:2;
	    }
	    .scrollx {
	      width: 100%;
		  display: flex;
	      white-space: nowrap;
	      border-radius: 20rpx;
	    }
</style>
